<template>
    <el-watermark id="watermark" :font="font" :content="watermark ? ['Happy Working'] : ''">
        <component :is="LayoutComponents[layout]" />
        <theme-drawer></theme-drawer>
    </el-watermark>
</template>

<script setup>
import { computed, reactive, watch } from "vue"
import { useGlobalStore } from "@/store/modules/global"
import LayoutVertical from "./LayoutVertical/index.vue"
import LayoutTransverse from "./LayoutTransverse/index.vue"
import ThemeDrawer from "./components/ThemeDrawer/index.vue"

// 布局种类
const LayoutComponents = {
    vertical: LayoutVertical,
    // classic: LayoutClassic,
    transverse: LayoutTransverse,
    // columns: LayoutColumns
}

const globalStore = useGlobalStore()

const isDark = computed(() => globalStore.isDark)
const layout = computed(() => globalStore.layout)
const watermark = computed(() => globalStore.watermark)
const font = reactive({ color: "rgba(0, 0, 0, .15)" })
watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), {
    immediate: true
});
</script>

<style>
</style>